<div th:fragment="maskCover">
    <style type="text/css">
        #mask_cover_box {
            width: 100%;
            height: 100%;
        }
        #mask_cover_box *:not(iframe){
            font-family: 'HYk2gj';
            color: #fff;
        }
        .mask_cover {
            position: absolute;
            display: flex;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: #fff;
            background-image: url(./bg2.jfif);
            background-size: cover;
        }
        .mask_cover .bg {
            display: none;
        }
        .mask_cover.type1 .bg {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #00000040;
        }
        .mask_cover .info {
            position: absolute;
            margin-top: -15vh;
            align-self: center;
            margin-left: 5%;
            padding: 1% 3%;
            background: rgba(0, 0, 0, .2);
            backdrop-filter: blur(5px);
            border-radius: 2vw;
            width: 35%;
            min-width: 400px;
        }

        .mask_cover.type1 .info {
            background: none;
            backdrop-filter: none;
            border-radius: none;
        }
        .mask_cover .desc {
            text-indent: 2em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-height: 2em;
            margin: 2% 0;
        }
        .mask_cover .title {
            font-size: 2.5em;
            font-weight: bold;
            padding: 1.5% 0;
            word-spacing: .1em;
            letter-spacing: .1em;
        }
        .bottom {
            margin: 5% 0 1% 0;
        }
        .mask_cover button {
            padding: .5em 1em;
            border-radius: .2em;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
        }
        .mask_cover .continue {
            background: #8a2be2;
            float: right;
        }
        .mask_cover .detail {
            margin: .5em 0;
            border-radius: .2em;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
            background: transparent;
            display: inline-block;;
        }
    </style>
    <template id="mask_cover">
        <div class="mask_cover">
            <div class="bg"></div>
            <div class="info">
                <div class="title">你的名字</div>
                <div>导演：<span class="director">新海诚</span></div>
                <div>
                    <div class="desc">故事发生在每千年回归一次的彗星造访过一个月之後，日本某个深山的乡下小镇。女高中生三叶每天都过着忧郁的生活，而她烦恼的不光有担任镇长的父亲所举行的选举运动，还有家传神社的古老习俗。在这个小小的城镇，周围都只是些爱瞎操心的老人。为此三叶对於大都市充满了憧憬。某一天，她做了一个变成男孩子的梦。在梦中三叶有着陌生的房间丶陌生的朋友，而眼前出现的则是东京的街道。三叶虽然感到困惑，但是能够来到朝思暮想的都市生活，让她觉得神清气爽。另一方面，在东京生活的男高中生泷也做了个奇怪的梦。他在一个从未去过的深山小镇中，变成了女高中生。「寻找从未见过的你」，两个陌生人就这样开始了寻找彼此的历程。</div>
                </div>
                <div class="bottom">
                    <button class="continue">继续播放</button>
                    <a href="javascript:alert('开发中，敬请期待');" class="detail">详细信息 >></a>
                </div>
            </div>
        </div>
    </template>
    <script type="text/javascript">
        function LockScreen(type, title, director, desc, imgSrc, href = "javascript:alert('开发中，敬请期待');", clickEvent = ()=>{} ) {
            var t = document.getElementById('mask_cover');
            var id = "cover_" + parseInt(Math.random() * 1000);
            var isShowing = false;
            var template = document.importNode(t.content, true);
            var cover = template.querySelector(".mask_cover");
            cover.style.display = isShowing?"flex":"none";
            cover.setAttribute("id", id);
            cover.classList.add("type" + type)
            cover.style.backgroundImage = 'url('+imgSrc+')';
            template.querySelector(".title").innerText = title;
            template.querySelector(".director").innerText = director;
            template.querySelector(".desc").setAttribute("title", desc);
            template.querySelector(".desc").innerText = desc;
            template.querySelector(".continue").addEventListener('click', hide);
            template.querySelector(".detail").href = href;

            function hide(e) {
                if (!isShowing) {
                    return;
                }
                var root = document.getElementById(id);
                var height = root.clientHeight;
                var a = root.animate({top:[0, -height+"px"], bottom:[0, height+"px"]}, {
                    duration: 800,
                    easing: 'ease-in-out'
                });
                var finishedEvent = (event) => {
                    var r = event.effect.target;
                    r.style.display = "none";
                    isShowing = false;
                    clickEvent(e);
                };
                a.finished.then( finishedEvent );
            }

            function show() {
                if (isShowing) {
                    return;
                }
                var root = document.getElementById(id);
                root.style.display = "flex";
                var anima = root.animate({opacity:[0, 1]}, {
                    duration: 500,
                    easing: 'ease-in-out'
                });
                anima.finished.then( () => {isShowing = true;} );
            }

            return {
                template: template,
                id: id,
                show: show,
                hide: hide,
                desc: (text) => {
                    var root = document.getElementById(id);
                    root.querySelector(".desc").setAttribute("title", text);
                    root.querySelector(".desc").innerText = text;
                },
                isShow: () => {return isShowing;},
                addClickListener: function(e) {
                    document.getElementById(id).querySelector(".continue").addEventListener('click', e);
                }
            };
        }

        function Locker(waitTime, lockScreen) {
            var time = waitTime;
            var index = 0;
            var isRunning = false;
            var dom = document.createElement("div");
            function lock() {
                dom.dispatchEvent(new CustomEvent('lock', {cancelable: true}));
                lockScreen.show();
            }
            function wait() {
                if (isRunning) {
                    return;
                }
                dom.dispatchEvent(new CustomEvent('wait', {cancelable: true}));
                index = setInterval(function() {
                    time --;
                    if (time < 0 ) {
                        lock();
                        clearInterval(index);
                        isRunning = false;
                    }
                }, 1000);
            }
            function unlock() {
                dom.dispatchEvent(new CustomEvent('unlock', {cancelable: true}));
                lockScreen.hide();
                clearInterval(index);
                time = waitTime;
                isRunning = false;
            }
            lockScreen.addClickListener(() => {
                unlock();
                // 重新进入等待状态
                wait();
            });
            return {
                status: () => {
                    if (lockScreen.isShow()) {
                        return "lock";
                    }
                    if (isRunning) {
                        return "wait"
                    }
                    return "unlock";
                },
                addEventListener(name, listener, options) {
                    dom.addEventListener(name, listener, options);
                },
                wait: wait,
                lock: lock,
                unlock: unlock
            };
        };
    </script>
</div>
